<!--
 * @Date: 2025-01-23 13:44:37
 * @LastEditors: xiaoshan
 * @LastEditTime: 2025-03-31 10:27:05
 * @FilePath: /i18n_translation_vite/example/vue3/src/App.vue
-->
<template>
    <div class="app">
        <nav class="navbar" v-bind="xx" aa="311">
            <div class="logo">FutureTech</div>
            <div class="nav-links" style="display: flex">
                <div class="operation">
                    <a-button @click="changeLang('zhcn')" style="margin-right: 10px">中文</a-button>
                    <a-button @click="changeLang('en')" style="margin-right: 10px">英文</a-button>
                </div>
                <router-link v-for="link in navLinks" :key="link.path" :to="link.path">
                    {{ link.text }}
                </router-link>
            </div>
        </nav>
        <div>
            <div class="logo">
                FutureTech -
                科技引领未来，创新驱动发展。在当今这个科技飞速发展的时代，FutureTech始终站在前沿，致力于为用户提供最先进、最优质的产品和服务。我们不断探索科技的边界，突破传统的束缚，用创新的思维和技术为用户带来前所未有的体验。无论是在人工智能、大数据、云计算还是其他领域，我们都有着深厚的技术积累和丰富的实践经验。我们相信，科技的力量是无穷的，它可以改变世界，让生活变得更加美好。因此，我们将继续努力，不断创新，为用户创造更多的价值。
            </div>
        </div>

        <router-view></router-view>

        <footer class="footer">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>
                        电话：400-888-8888 -
                        如果您在使用我们的产品或服务过程中遇到任何问题，欢迎随时拨打我们的客服电话。我们的客服团队由专业的人员组成，他们经过严格的培训，具备丰富的知识和经验。无论您是咨询产品信息、反馈问题还是寻求技术支持，我们的客服人员都会耐心地为您解答和处理。我们致力于为用户提供高效、优质的服务，让您在使用我们的产品时无后顾之忧。
                    </p>
                    <p>
                        邮箱：contact@futuretech.com -
                        除了电话，您也可以通过邮箱与我们联系。发送邮件到我们的指定邮箱，我们会尽快回复您的问题。邮箱是一种方便、快捷的沟通方式，您可以详细地描述您的问题和需求，我们的工作人员会认真阅读并及时处理。同时，我们也会对您的邮件进行分类和整理，以便更好地为您服务。
                    </p>
                    <p>
                        地址：我们的公司位于一个充满活力和创新氛围的地方。这里汇聚了众多的科技企业和人才，为我们的发展提供了良好的环境。我们的办公场所宽敞明亮，设施齐全，为员工创造了一个舒适、高效的工作环境。同时，我们也注重与周边企业和社区的合作与交流，共同推动科技的发展和进步。如果您有机会来访，我们将竭诚为您服务，让您更好地了解我们的公司和文化。
                    </p>
                    <p>
                        工作时间：我们的工作时间是根据用户的需求和市场的规律来安排的。我们深知用户在不同的时间段可能会有不同的需求，因此我们尽量保证在大部分用户需要的时间内提供服务。具体的工作时间我们会在官方网站上公布，您可以随时查看。同时，我们也会根据实际情况进行调整和优化，以确保为用户提供更加便捷、高效的服务。
                    </p>
                    <p>
                        客服团队介绍：我们的客服团队是公司的重要组成部分，他们是连接用户和公司的桥梁。客服团队的成员来自不同的专业背景，他们具备良好的沟通能力和服务意识。在工作中，他们始终以用户为中心，积极主动地为用户解决问题。无论是通过电话、邮件还是在线聊天，他们都会认真倾听用户的需求，及时给予回应和帮助。我们会定期对客服团队进行培训和考核，不断提高他们的专业水平和服务质量。
                    </p>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#" target="_blank">
                            微信 -
                            微信是中国最流行的社交平台之一，通过关注我们的微信公众号，您可以及时了解我们的最新动态、产品信息和优惠活动。我们会在微信公众号上发布一些独家内容，如技术文章、案例分享等，让您更好地了解我们的业务和技术。同时，您也可以通过微信与我们进行互动，提出您的意见和建议，我们会认真对待并及时回复。
                        </a>
                        <a href="#" target="_blank">
                            微博 -
                            微博是一个信息传播快速、广泛的平台。我们在微博上会分享一些行业动态、公司新闻和有趣的内容。通过关注我们的微博，您可以第一时间了解到行业的最新趋势和我们公司的发展情况。同时，您也可以在微博上与我们和其他用户进行交流和互动，共同探讨科技领域的话题。
                        </a>
                        <a href="#" target="_blank">
                            GitHub -
                            GitHub是全球最大的开源代码托管平台，我们在GitHub上开源了一些我们的项目和代码。通过关注我们的GitHub账号，您可以了解我们的技术实现细节，参与我们的开源项目，与全球的开发者一起交流和合作。我们欢迎广大开发者为我们的项目贡献代码和建议，共同推动科技的发展。
                        </a>
                        <a href="#" target="_blank">
                            抖音 -
                            抖音是一个非常受欢迎的短视频平台。我们在抖音上发布一些有趣、有价值的短视频，介绍我们的产品和服务，展示我们的技术实力和创新成果。通过关注我们的抖音账号，您可以以一种更加生动、直观的方式了解我们的公司和产品。同时，我们也会在抖音上举办一些互动活动，与用户进行更加亲密的交流。
                        </a>
                        <a href="#" target="_blank">
                            B站 -
                            B站是一个以年轻人为主要用户群体的视频平台。我们在B站上发布一些适合年轻人的科技科普视频和产品介绍视频。通过关注我们的B站账号，您可以在轻松愉快的氛围中学习科技知识，了解我们的产品特点。同时，我们也会与B站的用户进行互动，听取他们的意见和建议，不断改进我们的产品和服务。
                        </a>
                    </div>
                </div>
                <div class="footer-section">
                    <h3>公司简介</h3>
                    <p>
                        FutureTech成立于[具体年份]，自成立以来，我们始终坚持以科技为核心，以创新为动力，不断追求卓越。我们的团队由一群充满激情和创造力的科技人才组成，他们在不同的领域有着深厚的专业知识和丰富的实践经验。我们致力于研发和推广具有创新性和竞争力的产品和服务，为用户提供全方位的解决方案。
                    </p>
                    <p>
                        我们的产品涵盖了多个领域，包括人工智能、大数据、云计算、物联网等。在人工智能领域，我们开发了一系列智能算法和模型，用于图像识别、自然语言处理、智能推荐等方面。这些技术可以帮助企业提高效率、降低成本、提升竞争力。在大数据领域，我们提供数据采集、存储、分析和可视化等服务，帮助企业更好地理解和利用数据。在云计算领域，我们提供云服务器、云存储、云数据库等服务，为企业提供灵活、高效的计算资源。在物联网领域，我们开发了一系列物联网设备和平台，用于智能家居、智能交通、智能医疗等方面。
                    </p>
                    <p>
                        我们的服务理念是“用户至上，服务第一”。我们始终把用户的需求放在首位，不断优化我们的产品和服务，以满足用户的不同需求。我们建立了完善的客户服务体系，为用户提供全方位、一站式的服务。无论是售前咨询、售中服务还是售后服务，我们都会竭诚为用户提供帮助。
                    </p>
                    <p>
                        我们的发展目标是成为全球领先的科技企业。为了实现这一目标，我们不断加大研发投入，加强与国内外科研机构和企业的合作与交流。我们积极引进和培养优秀的科技人才，提高团队的整体素质和创新能力。我们相信，在全体员工的共同努力下，我们一定能够实现我们的发展目标，为科技的进步和社会的发展做出更大的贡献。
                    </p>
                </div>
                <div class="footer-section">
                    <h3>产品介绍</h3>
                    <p>我们的产品具有以下特点：</p>
                    <p>
                        创新性：我们不断探索科技的新领域，研发具有创新性的产品和技术。我们的产品采用了最新的科技成果，具有领先的技术水平和性能指标。例如，我们的人工智能产品采用了深度学习算法，能够实现高精度的图像识别和自然语言处理。
                    </p>
                    <p>
                        实用性：我们的产品注重实用性，能够为用户解决实际问题。我们深入了解用户的需求，根据用户的需求进行产品设计和开发。例如，我们的大数据产品可以帮助企业更好地分析和利用数据，提高企业的决策效率和竞争力。
                    </p>
                    <p>
                        易用性：我们的产品设计简洁、易懂，易于操作。我们注重用户体验，为用户提供友好的界面和便捷的操作方式。例如，我们的云计算产品提供了可视化的管理界面，用户可以轻松地进行服务器配置和管理。
                    </p>
                    <p>
                        安全性：我们高度重视产品的安全性，采取了一系列措施保障用户的数据安全和隐私。我们采用了先进的加密技术和安全防护机制，确保用户的数据在传输和存储过程中不被泄露和篡改。例如，我们的物联网产品采用了多层次的安全防护体系，保障设备的安全运行。
                    </p>
                    <p>我们的主要产品包括：</p>
                    <p>
                        智能办公系统：该系统集成了人工智能、大数据和云计算等技术，能够实现办公自动化、智能化。它可以帮助企业提高办公效率、降低成本、提升管理水平。例如，它可以实现文件自动分类、智能审批、会议自动安排等功能。此外，还支持员工在线协作，实时共享文档和信息，打破时间和空间的限制，让团队协作更加高效。
                    </p>
                    <p>
                        智能医疗设备：我们的智能医疗设备采用了先进的传感器和算法，能够实时监测患者的生命体征和健康状况。它可以为医生提供准确的诊断依据，提高医疗质量和效率。例如，我们的智能手环可以实时监测心率、血压、睡眠等数据，并将数据上传到云端，医生可以通过手机或电脑随时查看患者的健康状况。同时，我们还研发了智能诊断设备，能够快速准确地对疾病进行初步诊断，辅助医生做出更科学的治疗决策。
                    </p>
                    <p>
                        智能家居系统：该系统可以实现家居设备的智能化控制和管理。用户可以通过手机或语音控制家居设备，如灯光、空调、窗帘等。它可以为用户提供更加舒适、便捷的生活体验。例如，用户可以在回家前通过手机远程打开空调，调节室内温度。而且，智能家居系统还具备环境感知功能，能够根据室内外环境自动调节设备运行状态，实现节能减排。
                    </p>
                    <p>
                        智能交通系统：我们的智能交通系统采用了物联网、大数据和人工智能等技术，能够实现交通流量的实时监测和智能调控。它可以提高交通效率、减少交通事故、改善城市交通环境。例如，它可以根据交通流量实时调整信号灯的时间，引导车辆合理通行。除此之外，智能交通系统还能为驾驶员提供实时路况信息和最佳路线规划，帮助他们避开拥堵路段，节省出行时间。
                    </p>
                    <p>
                        智能教育平台：我们的智能教育平台融合了人工智能和大数据技术，为教育机构和学生提供个性化的学习方案。它可以根据学生的学习进度和能力，智能推荐学习资料和练习题，帮助学生提高学习效果。教师还可以通过平台实时监控学生的学习情况，进行有针对性的辅导。
                    </p>
                    <p>
                        智能金融服务系统：该系统利用先进的数据分析和风险评估模型，为金融机构提供精准的客户画像和风险预警。它可以帮助金融机构优化信贷决策，降低风险，提高服务效率。同时，为客户提供更加个性化的金融产品和服务推荐。
                    </p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>
                    &copy; 2024 FutureTech. All rights reserved. -
                    本公司保留所有权利，未经授权，不得擅自复制、传播或使用本公司的产品、服务和信息。我们将严格遵守相关法律法规，维护公司的合法权益。同时，我们也欢迎广大用户对我们的产品和服务提出宝贵的意见和建议，我们将不断改进和完善，为用户提供更好的体验。
                </p>
            </div>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let cc = '12312'
let c = `测试什么123${cc}`
console.log(c)

let cc1 = window.$iS('我的${1}小山的名字是${0}', ['小山', '朋友'])
console.log(cc1)

const xx = ref({
    name: 1312
})
const changeLang = function (value: any) {
    window.localStorage.setItem('lang', value)
    window.location.reload()
}
const navLinks = ref([
    { path: '/', text: '首页' },
    { path: '/products', text: '产品' },
    { path: '/about', text: '关于' },
    { path: '/contact', text: '联系我们' }
])
</script>

<style>
.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-links a {
    margin-left: 2rem;
    text-decoration: none;
    color: #333;
}

.nav-links a.router-link-active {
    color: #007bff;
}

.footer {
    margin-top: auto;
    background: #333;
    color: white;
    padding: 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.social-links a {
    margin-right: 1rem;
    color: white;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #555;
}
</style>
<!-- element-tag-marker: rjyn8k21 -->
